Version: 26.2.0

Styling your charts

Changing chart fonts (titles, axis, tool-tips, labels, everything) for entire chart

To change fonts of elements in the chart, we can set the css style in the default classnames provided by muze.

/* Changes the font family of title */
#chart .muze-title-cell {
  font-family: Palatino !important;
}

/* Changes the font family of subtitle */
#chart .muze-subtitle-cell {
  font-family: Palatino !important;
}

/* Changes the font family of axis tick labels */
#chart .muze-ticks {
  font-family: Palatino !important;
}

/* Changes the font family of axis name */
#chart .muze-axis-name {
  font-family: Palatino !important;
}

/* Changes the font family of the whole tooltip content */
#chart .muze-tooltip-box {
  font-family: Palatino !important;
}

Example

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const SI_SYMBOL = ["", "k", "M", "G", "T", "P", "E"];

function numberFormatter(number) {
  const tier = (Math.log10(number) / 3) | 0;
  if (tier == 0) return number;
  const suffix = SI_SYMBOL[tier];
  const scale = Math.pow(10, tier * 3);
  const scaled = number / scale;
  return scaled.toFixed(1) + suffix;
}

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

const RowField = "value";
const ColumnField = "month";

muze
  .canvas()
  .data(data)
  .rows([RowField]) 
  .columns([ColumnField]) 
  .config({
    sort: {
      month: (a, b) => months.indexOf(a) - months.indexOf(b),
    },
    axes: {
      y: {
        tickFormat: (val) => numberFormatter(val.rawValue),
        numberOfTicks: 8,
      },
    },
  })
  .layers([
    {
      mark: "bar",
      transform: { type: "group" },
    },
  ])
  .title("Coronavirus tests done by months")
  .subtitle("From April - August")
  .mount("#chart");

Changing the color scheme of data plots

Method 1: Using Legend Configuration with Color Ranges

To customize colors for your data plots, use the legend.color configuration with field-specific color ranges:

const { muze, getDataFromSearchQuery } = viz;
const data = getDataFromSearchQuery();

const RowField = "Total Discount";
const ColumnField = "Category";
const ColorField = "Ship Mode";

muze
  .canvas()
  .data(data)
  .rows([RowField])
  .columns([ColumnField])
  .layers([
    {
      mark: "bar",
      transform: { type: "group" },
      encoding: {
        color: ColorField
      }
    }
  ])
  .config({
    legend: {
      color: {
        range: ["pink", "orange", "red"],
      }
    }
  })
  .mount("#chart");

Method 2: Multiple Color Fields

For charts with multiple color encodings (e.g., grouped bars with lines), you can configure different color ranges for each field:

const { muze, getDataFromSearchQuery } = viz;
const data = getDataFromSearchQuery();

const RowField = "Total Discount";
const ColumnField = "Category";
const ColorField = "Ship Mode";  // For bars
const ColorField2 = "Region";      // For lines

muze
  .canvas()
  .data(data)
  .rows([RowField])
  .columns([ColumnField])
  .layers([
    {
      mark: "bar",
      transform: { type: "group" },
      encoding: {
        color: ColorField
      }
    },
    {
      mark: "line",
      transform: { type: "group" },
      encoding: {
        color: ColorField2
      }
    }
  ])
  .config({
    legend: {
      color: {
        fields: {
          [ColorField]: {
            range: ["pink", "orange", "red"]
          },
          [ColorField2]: {
            range: ["black", "blue", "green", "brown"]
          }
        }
      }
    }
  })
  .mount("#chart");

Complete Example with Styling

const { muze, getDataFromSearchQuery } = viz;
const data = getDataFromSearchQuery();

const SI_SYMBOL = ["", "k", "M", "G", "T", "P", "E"];

function numberFormatter(number) {
  const tier = (Math.log10(number) / 3) | 0;
  if (tier == 0) return number;
  const suffix = SI_SYMBOL[tier];
  const scale = Math.pow(10, tier * 3);
  const scaled = number / scale;
  return scaled.toFixed(1) + suffix;
}

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

const RowField = "value";
const ColumnField = "month";
const ColorField = "state";

muze
  .canvas()
  .data(data)
  .rows([RowField])
  .columns([ColumnField])
  .layers([
    {
      mark: "bar",
      transform: { type: "group" },
      encoding: {
        color: ColorField
      }
    }
  ])
  .config({
    sort: {
      month: (a, b) => months.indexOf(a) - months.indexOf(b),
    },
    axes: {
      y: {
        tickFormat: (val) => numberFormatter(val.rawValue),
        numberOfTicks: 8,
      },
    },
    legend: {
      color: {
        fields: {
          [ColorField]: {
            range: ["pink", "orange", "red", "mauvish", "yellow"]
          }
        }
      }
    }
  })
  .title("Coronavirus tests done by states")
  .subtitle("From April - August")
  .mount("#chart");

Changing the color of other elements (axis, tool-tips etc.)

Axis Styling

Muze provides default class names for axis and tooltips.

Let's see how you can use these classes and change the color of axis ticks

.muze-ticks: This classname is used for changing style of axis tick labels
.muze-tick-lines: This classname is used for changing the style of axis tick lines

#chart .muze-ticks {
  fill: #bb9077;
}

#chart .muze-tick-lines {
  stroke: #626262;
}

Example

#chart .muze-ticks {
  fill: #bb9077;
}

#chart .muze-tick-lines {
  stroke: #626262;
}

JavaScript

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const SI_SYMBOL = ["", "k", "M", "G", "T", "P", "E"];

function numberFormatter(number) {
  const tier = (Math.log10(number) / 3) | 0;
  if (tier == 0) return number;
  const suffix = SI_SYMBOL[tier];
  const scale = Math.pow(10, tier * 3);
  const scaled = number / scale;
  return scaled.toFixed(1) + suffix;
}

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

const RowField = "value";
const ColumnField = "month";
const ColorField = "state";

muze
  .canvas()
  .data(data)
  .rows([RowField]) 
  .columns([ColumnField]) 
  .layers([
    {
      mark: "bar",
      transform: { type: "group" },
      encoding: {
        color: ColorField
      }
    },
  ])
  .config({
    sort: {
      month: (a, b) => months.indexOf(a) - months.indexOf(b),
    },
    axes: {
      y: {
        tickFormat: (val) => numberFormatter(val.rawValue),
        numberOfTicks: 8,
      },
    },
    legend: {
      color: {
        fields: {
          [ColorField]: {
            range: ["pink", "orange", "red", "mauvish", "yellow"]
          }
        }
      }
    }
  })
  .title("Coronavirus tests done by states")
  .subtitle("From April - August")
  .mount("#chart");

Muze adds classnames in tooltip elements which you can use to change the style of tooltip.

.muze-tooltip-box: This classname is used to set the background and color of the tooltip container

#chart .muze-tooltip-box {
  padding: 5px;
  background: #2d2424;
  color: #fff;
  box-shadow: none;
}

#chart .muze-tooltip-value {
  color: #fff;
}

#chart .muze-tooltip-key {
  color: #fff;
}


#chart .muze-tooltip-content-container-highlightSummary {
  border-right: none;
}

#chart .muze-tooltip-selected-row {
  background: #615252;
}

  const { muze, getDataFromSearchQuery, env } = viz;
  const data = getDataFromSearchQuery();

  const RowField = "Horsepower";
  const ColumnField = "Origin";
  const ColorField = "Cylinders";
  muze
    .canvas()
    .rows([RowField])
    .columns([ColumnField])
    .data(data)
    .layers([
      {
        mark: "bar",
        transform: { type: "group" },
        encoding: {
          color: ColorField
        }
      }
    ])
    .title("Grouped bar chart", { position: "bottom", align: "right" })
    .subtitle("Horsepower by Origin coloured by Cylinders", {
      position: "bottom",
      align: "right"
    })
    .mount("#chart");

Styling the title and subtitle (including alignment)

Muze provides classnames for title and subtitle which can be used to change their style.

muze-title-cell: Styles the title element.
muze-subtitle-cell: Styles the subtitle element.

CSS

#chart .muze-title-cell {
  font-family: Arial;
  color: #090f54;
}

#chart .muze-subtitle-cell {
  font-family: Arial;
  color: #626262;
}

JavaScript

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const SI_SYMBOL = ["", "k", "M", "G", "T", "P", "E"];

function numberFormatter(number) {
  const tier = (Math.log10(number) / 3) | 0;
  if (tier == 0) return number;
  const suffix = SI_SYMBOL[tier];
  const scale = Math.pow(10, tier * 3);
  const scaled = number / scale;
  return scaled.toFixed(1) + suffix;
}

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

const RowField = "value";
const ColumnField = "month";
const ColorField = "state";

muze
  .canvas()
  .data(data)
  .rows([RowField]) 
  .columns([ColumnField]) 
  .layers([
    {
      mark: "bar",
      transform: { type: "group" },
      encoding: {
        color: ColorField
      }
    },
  ])
  .config({
    sort: {
      month: (a, b) => months.indexOf(a) - months.indexOf(b),
    },
    axes: {
      y: {
        tickFormat: (val) => numberFormatter(val.rawValue),
        numberOfTicks: 8,
      },
    },
    legend: {
      color: {
        fields: {
          [ColorField]: {
            range: ["pink", "orange", "red", "mauvish", "yellow"]
          }
        }
      }
    }
  })
  .title("Coronavirus tests done by states")
  .subtitle("From April - August")
  .mount("#chart");

Adding a background color to the chart

Background color of chart can be changed using muze-group-container classname.

Let's see how we can do this using css:

CSS

#chart .muze-group-container {
  background: #ffdddd;
}

JavaScript

  const { muze, getDataFromSearchQuery, env } = viz;
  const data = getDataFromSearchQuery();

  // Declare fields for rows, columns, and color as done above for consistency and clarity
  const RowField = "Horsepower";
  const ColumnField = "Origin";
  const ColorField = "Cylinders";

  muze
    .canvas()
    .rows([RowField])
    .columns([ColumnField])
    .data(data)
    .layers([
      {
        mark: "bar",
        transform: { type: "group" },
        encoding: {
          color: ColorField
        }
      }
    ])
    .title("Grouped bar chart", { position: "bottom", align: "right" })
    .subtitle("Horsepower by Origin coloured by Cylinders", {
      position: "bottom",
      align: "right"
    })
    .mount("#chart");

Changing chart fonts (titles, axis, tool-tips, labels, everything) for entire chart​

Changing the color scheme of data plots​

Method 1: Using Legend Configuration with Color Ranges​

Method 2: Multiple Color Fields​

Complete Example with Styling​

Changing the color of other elements (axis, tool-tips etc.)​

Axis Styling​

Tooltip Styling​

Styling the title and subtitle (including alignment)​

Adding a background color to the chart​